import React, { CSSProperties } from "react";
import { SquareInfo } from "./previewer";

const roundStyle: CSSProperties = {
  width: 14,
  height: 14,
  borderRadius: "50%",
  background: "rgba(255,255,255,0.7)",
  border: "4px solid #69c0ff",
  position: "absolute",
  transform: "translate(-50%,-50%)",
  cursor: "move",
};
const lineStyle: CSSProperties = {
  background: "#fff",
  position: "absolute",
  boxShadow: "0 0 5px #69c0ff",
};

export const Editor = (
  props: SquareInfo & { onMouseDown: any; scale: number; src: string }
) => {
  const { left, right, top, bottom, width, height, src, scale, onMouseDown } =
    props;
  return (
    <div>
      <div
        style={{
          ...lineStyle,
          width: 1,
          height: "100%",
          left: left * scale,
          cursor: "col-resize",
        }}
        data-type="left"
        onMouseDown={onMouseDown}
      />

      <div
        style={{
          ...lineStyle,
          width: 1,
          height: "100%",
          left: right * scale,
          cursor: "col-resize",
        }}
        onMouseDown={onMouseDown}
        data-type="right"
      />

      <div
        style={{
          ...lineStyle,
          height: 1,
          width: "100%",
          top: top * scale,
          cursor: "row-resize",
        }}
        onMouseDown={onMouseDown}
        data-type="top"
      />

      <div
        style={{
          ...lineStyle,
          height: 1,
          width: "100%",
          top: bottom * scale,
          cursor: "row-resize",
        }}
        onMouseDown={onMouseDown}
        data-type="bottom"
      />

      <>
        <div
          style={{
            ...roundStyle,
            left: left * scale,
            top: ((top + bottom) / 2) * scale,
          }}
          data-type="left"
          onMouseDown={onMouseDown}
        ></div>
        <div
          style={{
            ...roundStyle,
            left: right * scale,
            top: ((top + bottom) / 2) * scale,
          }}
          data-type="right"
          onMouseDown={onMouseDown}
        ></div>
        <div
          style={{
            ...roundStyle,
            top: top * scale,
            left: ((left + right) / 2) * scale,
          }}
          data-type="top"
          onMouseDown={onMouseDown}
        ></div>
        <div
          style={{
            ...roundStyle,
            top: bottom * scale,
            left: ((left + right) / 2) * scale,
          }}
          data-type="bottom"
          onMouseDown={onMouseDown}
        ></div>
      </>
      <>
        <div
          style={{
            ...roundStyle,
            left: left * scale,
            top: top * scale,
          }}
          data-type="left-top"
          onMouseDown={onMouseDown}
        ></div>
        <div
          style={{
            ...roundStyle,
            left: right * scale,
            top: top * scale,
          }}
          data-type="right-top"
          onMouseDown={onMouseDown}
        ></div>
        <div
          style={{
            ...roundStyle,
            left: left * scale,
            top: bottom * scale,
          }}
          data-type="left-bottom"
          onMouseDown={onMouseDown}
        ></div>
        <div
          style={{
            ...roundStyle,
            left: right * scale,
            top: bottom * scale,
          }}
          data-type="right-bottom"
          onMouseDown={onMouseDown}
        ></div>
        <img
          src={src}
          draggable="false"
          id="square-nine-editor-img"
          style={{
            imageRendering: "pixelated",
            width: width * scale,
            height: height * scale,
          }}
        />
      </>
    </div>
  );
};
